@charset "utf-8";
* {
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
.carousel_box {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	padding-top: 36.6%;
	overflow: hidden;
	.carousel {
		position: absolute;
		left: 0;
		top: 0;
		font-size: 0;
		white-space: nowrap;
		li{
			display: inline-block;
			img {
				width: 100%;
			}
		}
	}
	.arrow {
		position: absolute;
		top: 0;
		font-size: 42px;
		width: 10%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		cursor: pointer;
		transition: all .3s;
	}
	.arr_left {
		left: 0;
		background: linear-gradient(to left,transparent,rgba(0,0,0,.7));
		transform: translateX(-100%);
	}
	.arr_right {
		right: 0;
		background: linear-gradient(to right,transparent,rgba(0,0,0,.7));
		transform: translateX(100%);
	}
	&:hover .arrow {
		transform: translateX(0);
	}
	.dot {
		position: absolute;
		bottom: 5%;
		left: 50%;
		transform: translateX(-50%);
		font-size: 0;
		li {
			position: relative;
			display: inline-block;
			width: 50px;
			height: 10px;
			background-color: #fff;
			margin: 0 5px;
			border-radius: 5px;
			overflow: hidden;
			&.active {
				width: 75px;
				transition: all 1s;
				&::before {
					width: 100%;
					transition: all 1s;
				}
			}
			&::before {
				content: "";
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 0;
				height: 100%;
				background-color: skyblue;
			}
			
		}
	}
}